<template>
  <div class="p-box">
    <div class="index-nav-arrow arrow-up">
      <img class="img" src="../../assets/arrow-up-1.png"
           v-if="params.sort === 'price' && params.order === 'asc'" mode="aspectFit">
      <img class="img" src="../../assets/arrow-up.png" v-else mode="aspectFit">
      <!-- <img class="img" src="../../assets/arrow-up.png" /> -->
    </div>
    <div class="index-nav-arrow arrow-down">
      <!-- <img class="img" src="../../assets/arrow-down.png" /> -->
      <img class="img" src="../../assets/arrow-down.png"
           v-if="params.sort === 'price' && params.order === 'desc'" mode="aspectFit">
      <img class="img" src="../../assets/arrow-down-1.png" v-else mode="aspectFit">
    </div>
  </div>
</template>

<script>
export default {
  name: "NavArrow",
  props: {
    params: {
      type: Object,
      default: () => ({}),
    },
  },
  mounted() {
    console.log(this.params);
  },
};
</script>

<style lang="scss" scoped>
.p-box {
  display: inline-block;
  position: relative;
  .index-nav-arrow {
    width: 16px;
    height: 16px;
    > img {
      width: inherit;
      // height: inherit;
    }
  }
  .arrow-up {
    position: absolute;
    bottom: 2px;
    left: -2px;
  }
  .arrow-down {
    position: absolute;
    bottom: -7px;
    left: -2px;
  }
}
</style>